<template>
  <div>
    <Add ref="add" :formId="formId" @ok="searchView"></Add>
    <a-row :gutter="10">
      <a-col :span="4">
        <FormSelect @change="onFormChange"></FormSelect>
      </a-col>
      <a-col :span="20">
        <a-card title="管理视图" size="small">
          <a-tabs v-model="viewId" type="editable-card" @edit="onEditView">
            <a-tab-pane v-for="obj in list" :tab="obj.name" :key="obj.id"></a-tab-pane>
          </a-tabs>
          <Layout :formId="formId" :viewId="viewId"></Layout>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import Add from './Add'
import FormSelect from '@/views/autoform/form/Select'
import Layout from '@/views/autoform/column/Layout'
export default {
  components: {
    Add, FormSelect, Layout
  },
  data () {
    return {
      viewId: '',
      formId: '',
      list: []
    }
  },
  mounted () {
  },
  methods: {
    onFormChange (id) {
      this.formId = id
      this.searchView()
    },
    searchView () {
      this.$http.get('/zg-autoform/view/list', { formId: this.formId }, data => {
        this.list = data
        if (data.length > 0) {
          this.viewId = data[0].id
        }
      })
    },
    onEditView (targetKey, action) {
      this[`${action}View`](targetKey)
    },
    addView () {
      this.$refs.add.open()
    },
    removeView (targetKey) {
       this.confirm(
        () => {
          this.$http.post('/zg-autoform/view/del', [targetKey], () => {
            this.searchView()
          })
        },
        '确定要删除这条数据么')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
